import AvatarCom from '@/components/avatarUpload';
// import { update } from '@/services/api/order';
import { superUpdate, updatePassword } from '@/services/api';
import { update, updatePasswordUser } from '@/services/api/user';
import { history } from '@umijs/max';
import { Card, Form, Input, Modal, Tag, Typography, message } from 'antd';
import React from 'react';
import styles from './index.less';

export interface IDetailManagerProps {
	getDetail: () => void;
	detailType: string;
	dataSource: Record<string, any>;
	[key: string]: any;
}

const title: Record<string, string> = {
	nickname: '修改昵称',
	password: '修改密码',
	phone: '更换手机号',
};

const DetailManager: React.FC<IDetailManagerProps> = ({ dataSource, detailType, getDetail }) => {
	const [isEdit, setIsEdit] = React.useState(false);
	const [Title, setTitle] = React.useState<string>('');
	const [editForm] = Form.useForm();
	const [type, setType] = React.useState('nickname');

	const modifyMessage = async (key: string) => {
		setIsEdit(true);
		setTitle(title[key]);
		setType(key);
	};

	return (
		<div className={styles.container}>
			<Card>
				<h3>用户信息</h3>
				<section className={styles.detail}>
					<div className={styles.detail_message}>
						<div className={styles.message_box}>
							<p>
								昵称: <span className={styles.message_text}>{dataSource?.nickname || '-'}</span>
							</p>
							<span
								className={styles.modify}
								onClick={() => {
									modifyMessage('nickname');
								}}
							>
								修改
							</span>
						</div>
						<div className={styles.message_box}>
							<div
								style={{
									display: ' flex',
									alignItems: 'center',
									height: '60px',
								}}
							>
								<Typography.Paragraph
									style={{ margin: 0, color: '#666', fontSize: '16px' }}
									copyable = {{ text: dataSource?.primary_id}}
								>
									用户ID:
									<span className={styles.message_text}>{dataSource?.primary_id}</span>
								</Typography.Paragraph>
							</div>
						</div>
						<div className={styles.message_box}>
							<p>
								手机号码: <span className={styles.message_text}>{dataSource?.phone}</span>
							</p>
							<span
								className={styles.modify}
								onClick={() => {
									modifyMessage('phone');
								}}
							>
								更换
							</span>
						</div>
						<div className={styles.message_box}>
							<p>
								密码: <span className={styles.message_text}>******</span>
							</p>
							<span
								className={styles.modify}
								onClick={() => {
									modifyMessage('password');
								}}
							>
								修改
							</span>
						</div>
					</div>
					<div className={styles.avatar}>
						<AvatarCom
							value={dataSource?.cover}
							onChange={async (val) => {
								if (detailType === 'manager') {
									const res = await superUpdate({
										id: dataSource?.id,
										cover: val,
									});
									if (res.code === 200) {
										message.success('图片修改成功');
										getDetail();
									}
								}
								if (detailType === 'user') {
									const res = await update({
										id: dataSource?.id,
										cover: val,
									});
									if (res.code === 200) {
										message.success('图片修改成功');
										getDetail();
									}
								}
							}}
						/>
					</div>
				</section>
				<h3>基本信息</h3>
				<section className={styles.detail}>
					<div className={styles.detail_text}>
						<span>省：{dataSource?.province}</span>
						<span>市：{dataSource?.city}</span>
						<span>年龄：{dataSource?.age || '-'}</span>
						<span>
							性别：{dataSource?.sex === 'man' ? '男' : dataSource?.sex === 'female' ? '女' : '-'}
						</span>
						{dataSource?.type === 'manager' ? (
							<span>
								状态：
								{dataSource?.status === '1' ? (
									<Tag color="success">启用</Tag>
								) : (
									<Tag color="error">禁用</Tag>
								)}
							</span>
						) : null}
					</div>
				</section>
				<h3>用户描述</h3>
				<section className={styles.detail}>
					<div className={styles.detail_description}>
						<p>{dataSource?.description || '暂时没有描述'}</p>
					</div>
				</section>
			</Card>

			<Modal
				title={Title}
				open={isEdit}
				onOk={async () => {
					const values = await editForm.validateFields();
					try {
						if (type === 'password' && detailType === 'manager') {
							const res = await updatePassword(dataSource.id, { password: values.password });
							if (res.status !== 200) {
								return message.error(res.message || '修改失败');
							}
							message.success('修改成功');
							if (res.data.pri_id === dataSource.primary_id) {
								setTimeout(() => {
									message.info('请重新登录');
									history.push('/login');
								}, 1000);
							}
							return;
						}

						if (type === 'password' && detailType === 'user') {
							const res = await updatePasswordUser(dataSource.id, { password: values.password });
							if (res.status === 200) {
								message.success('修改成功');
								getDetail();
							}
							return;
						}

						if (detailType === 'manager') {
							const res = await superUpdate({ id: dataSource.id, ...values });
							if (res.status !== 200) {
								return message.error(res.message || '更新失败');
							}
							message.success('修改成功');
						}
						if (detailType === 'user') {
							const res = await update({ id: dataSource.id, ...values });
							if (res.status !== 200) {
								return message.error(res.message || '更新失败');
							}
							message.success('修改成功');
						}
					} catch (e) {
						console.log('🚀 ~ This is a result of console.log ~ ✨: ', e);
					} finally {
						setIsEdit(false);
						editForm.resetFields();
						getDetail();
					}
				}}
				onCancel={() => {
					setIsEdit(false);
					editForm.resetFields();
				}}
			>
				<div style={{ padding: '20px' }}>
					<Form form={editForm}>
						{type === 'nickname' && (
							<Form.Item label={Title} name="nickname">
								<Input />
							</Form.Item>
						)}
						{type === 'password' && (
							<>
								<Form.Item
									label="设置新密码"
									name="password"
									rules={[
										{ required: true, message: '该字段为必填项' },
										{
											min: 6,
											max: 12,
											message: '密码在 6-12 字符之间',
											validateTrigger: 'onSubmit',
										},
									]}
								>
									<Input.Password />
								</Form.Item>

								<Form.Item
									label="请确认密码"
									name="rePassword"
									rules={[
										{
											validator(rule, value, callback) {
												if (value && value !== editForm.getFieldValue('password')) {
													callback('两次密码不一致');
												} else {
													callback();
												}
											},
											validateTrigger: 'onSubmit',
										},
									]}
								>
									<Input.Password />
								</Form.Item>
							</>
						)}
						{type === 'phone' && (
							<Form.Item
								label={Title}
								name="phone"
								rules={[
									{
										required: true,
										message: '无效的电话号码',
										pattern: /^1[3-9]\d{9}$/,
										validateTrigger: 'onSubmit',
									},
								]}
							>
								<Input />
							</Form.Item>
						)}
					</Form>
				</div>
			</Modal>
		</div>
	);
};

export default DetailManager;
